<template>
  <lay-container fluid="true" class="organization-box">
    <div style="display: flex">
      <div :style="{ width: isFold ? `0px` : `300px` }" class="left-tree">
        <!-- tree -->
        <div v-show="!isFold">
          <lay-button type="normal" size="sm" @click="toAdd">
            <lay-icon type="layui-icon-addition"></lay-icon>
            新建
          </lay-button>
          <lay-button type="warm" size="sm" @click="toEdit">
            <lay-icon type="layui-icon-edit"></lay-icon>
            修改
          </lay-button>
          <lay-button type="danger" size="sm" @click="toDelete">
            <lay-icon type="layui-icon-delete"></lay-icon>
            删除
          </lay-button>
        </div>

        <lay-tree v-show="!isFold" style="margin-top: 10px" :data="data" :loading="loadingFlag"
          v-model:selectedKey="selectedKey" :showLine="showLine" :expandKeys="[1, 3, 4]" @node-click="handleClick">
          <template #title="{ data }">
            <span :class="selectedKey == data.id ? 'isChecked' : ''">
              {{ data.title }} {{ data.id }}
            </span>
          </template>
        </lay-tree>
        <div class="isFold" @click="isFold = !isFold">
          &nbsp;<lay-icon v-if="!isFold" class="layui-icon-left"></lay-icon>
          <lay-icon v-else class="layui-icon-right"></lay-icon>
        </div>
      </div>
      <div style="flex: 1; padding: 10px; overflow: auto">
        <!-- table -->
        <lay-card>
          <lay-form>
            <lay-row>
              <lay-col :md="5">
                <lay-form-item label="用户账号" label-width="80">
                  <lay-input v-model="searchUserQuery.userName" placeholder="请输入" size="sm" :allow-clear="true"
                    style="width: 98%"></lay-input>
                </lay-form-item>
              </lay-col>
              <lay-col :md="5">
                <lay-form-item label="用户名" label-width="80">
                  <lay-input v-model="searchUserQuery.nickName" placeholder="请输入" size="sm" :allow-clear="true"
                    style="width: 98%"></lay-input>
                </lay-form-item>
              </lay-col>
              <lay-col :md="5">
                <lay-form-item label="性别" label-width="80">
                  <lay-select class="search-input" size="sm" v-model="searchUserQuery.sex" :allow-clear="true"
                    placeholder="请选择">
                    <lay-select-option value="男" label="男"></lay-select-option>
                    <lay-select-option value="女" label="女"></lay-select-option>
                    <lay-select-option value="未知" label="未知"></lay-select-option>
                  </lay-select>
                </lay-form-item>
              </lay-col>
              <lay-col :md="5">
                <lay-form-item label-width="20">
                  <lay-button style="margin-left: 20px" type="normal" size="sm" @click="toSearch">
                    查询
                  </lay-button>
                  <lay-button size="sm" @click="toReset"> 重置</lay-button>
                </lay-form-item>
              </lay-col>
            </lay-row>
          </lay-form>
        </lay-card>
        <lay-table :page="page" :resize="true" :height="'calc(100vh - 260px)'" :columns="columns" :loading="loadingFlag"
          :default-toolbar="true" :data-source="dataSource" v-model:selected-keys="selectedKeys" @change="change"
          @sortChange="sortChange">
          <template #status="{ row }">
            <lay-switch :model-value="row.status === true || row.status === 'true' || row.status === 1"
              @change="changeStatus($event, row)"></lay-switch>
          </template>
          <template #role="{ row }">
            <lay-tag color="#165DFF" variant="light">{{ row.role }}</lay-tag>
          </template>

          <template v-slot:toolbar>
            <lay-button size="sm" type="primary" @click="changeVisible11('新增', null)">新增
            </lay-button>
            <lay-button size="sm" @click="toRemoveUser">删除</lay-button>
          </template>
          <template v-slot:operator="{ row }">
            <lay-button size="xs" border="green" border-style="dashed" @click="changeVisible11('编辑', row)">编辑
            </lay-button>
            <lay-popconfirm content="确定要删除此用户吗?" @confirm="confirmUser(row)" @cancel="cancel">
              <lay-button size="xs" border="red" border-style="dashed">删除
              </lay-button>
            </lay-popconfirm>
          </template>
        </lay-table>
      </div>
    </div>
    <!-- 新增与编辑 -->
    <lay-layer v-model="visible11" :title="title" :area="['1000px', '550px']">
      <div style="padding: 20px">
        <lay-form :model="model11" ref="layFormRef11" required>
          <lay-row space="10">
            <lay-col md="12" sm="12" xs="24">
              <div class="grid-demo"> <lay-form-item label="名称" prop="nickName">
                  <lay-input v-model="model11.nickName" :maxlength="24" placeholder="请输入名称"></lay-input>
                </lay-form-item></div>
            </lay-col>
            <lay-col md="12" sm="12" xs="24">
              <div class="grid-demo"><lay-form-item label="电话" prop="phoneNumber">
                  <lay-input v-model="model11.phoneNumber" :maxlength="11" placeholder="请输入手机号"></lay-input>
                </lay-form-item></div>
            </lay-col>
          </lay-row>
          <lay-row space="10">
            <lay-col md="12" sm="12" xs="24">
              <div class="grid-demo"><lay-form-item label="性别" prop="sex">
                  <lay-select v-model="model11.sex" style="width: 100%">
                    <lay-select-option value="男" label="男"></lay-select-option>
                    <lay-select-option value="女" label="女"></lay-select-option>
                    <lay-select-option value="未知" label="未知"></lay-select-option>
                  </lay-select>
                </lay-form-item></div>
            </lay-col>
            <lay-col md="12" sm="12" xs="24">
              <div class="grid-demo"><lay-form-item label="密码" prop="password">
                  <lay-input v-model="model11.password" type="password" password :maxlength="24"
                    placeholder="请输入密码"></lay-input>
                </lay-form-item></div>
            </lay-col>
          </lay-row>

          <lay-row space="10">
            <lay-col md="12" sm="12" xs="24">
              <div class="grid-demo"><lay-form-item label="email" prop="email">
                  <lay-input v-model="model11.email" placeholder="请输入邮箱"></lay-input>
                </lay-form-item></div>
            </lay-col>
            <lay-col md="12" sm="12" xs="24">
              <div class="grid-demo">
                <lay-form-item label="组织部门" prop="deptId">
                  <lay-tree-select :allow-clear="true" :search="true" :searchNodeMethod="searchNodeMethod"
                    style="width: 100%" v-model="model11.deptId" :data="optionsDeptSelect"
                    placeholder="请选择部门"></lay-tree-select>
                </lay-form-item>
              </div>
            </lay-col>
          </lay-row>
          <lay-row space="10">
            <lay-col md="24" sm="24" xs="24">
              <lay-form-item label="描述" prop="remark">
                <lay-textarea placeholder="请输入描述" v-model="model11.remark"></lay-textarea>
              </lay-form-item>
            </lay-col>
          </lay-row>
          <lay-row space="10">
            <lay-col md="24" sm="24" xs="24">
              <lay-form-item label="id" prop="id" v-show="false">
                <lay-input v-model="model11.id" :disabled="true"></lay-input>
              </lay-form-item>
            </lay-col>
          </lay-row>
        </lay-form>
        <div style="width: 100%; text-align: center">
          <lay-button size="sm" type="primary" @click="toSubmitUser">保存</lay-button>
          <lay-button size="sm" @click="toCancelUser">取消</lay-button>
        </div>
      </div>
    </lay-layer>

    <lay-layer v-model="visible22" :title="title22" :area="['700px', '400px']">
      <div style="padding: 20px">
        <lay-form :model="model22" ref="layFormRef11" required>
          <lay-row>
            <lay-col md="12">
              <lay-form-item label="上级机构" prop="parentId">
                <lay-tree-select :allow-clear="true" :search="true" :searchNodeMethod="searchNodeMethod"
                  v-model="model22.parentId" :data="optionsDeptSelect" placeholder="请选择上级部门"></lay-tree-select>
              </lay-form-item>
              <lay-form-item label="机构名称" prop="deptName">
                <lay-input v-model="model22.deptName"></lay-input>
              </lay-form-item>
              <lay-form-item label="机构电话" prop="phone">
                <lay-input v-model="model22.phone"></lay-input>
              </lay-form-item>
              <lay-form-item label="机构代码" prop="deptCategory">
                <lay-input v-model="model22.deptCategory"></lay-input>
              </lay-form-item>
            </lay-col>
            <lay-col md="12">
              <lay-form-item label="机构状态" prop="status">
                <lay-select v-model="model22.status" style="width: 100%">
                  <lay-select-option value="0" label="激活"></lay-select-option>
                  <lay-select-option value="1" label="停用"></lay-select-option>
                </lay-select>
              </lay-form-item>
              <lay-form-item label="排序号" prop="orderNum">
                <lay-input-number style="width: 100%" v-model="model22.orderNum" position="right"></lay-input-number>
              </lay-form-item>
              <lay-form-item label="描述" prop="email">
                <lay-textarea placeholder="请输入描述" v-model="model22.email" :rows="4"></lay-textarea>
              </lay-form-item>
            </lay-col>
          </lay-row>
        </lay-form>
        <div style="width: 100%; text-align: center">
          <lay-button size="sm" type="primary" @click="toSubmit">保存
          </lay-button>
          <lay-button size="sm" @click="toCancel">取消</lay-button>
        </div>
      </div>
    </lay-layer>
  </lay-container>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { layer } from '@layui/layui-vue'
import { selectDeptTree, queryTree, saveByLeader, queryDetail, delsByLeader, listByLimitUser, saveUserBySuper, deleteUserByIds, updateBySuper } from '../../../api/module/dept-manager';

onMounted(() => {
  // 执行表格初始化渲染
  queryDataByServerForLimit();
  // 初始化用户列表
  listByLimitUserTable();

});

/**
 * 
 * @param node 搜索树节点
 * @param value 
 */
const searchNodeMethod = (node: { title: string }, value: string) => {
  console.log(node, value, 'node, value')
  return node.title.includes(value)
}

const searchUserQuery = ref({
  userName: '',
  nickName: '',
  sex: '',
  deptId: null as number | null,
  pageIndex: 1,
  pageSize: 10,
})


const loadingFlag = ref(true)
// 获取接口用户信息
const queryDataByServerForLimit = async () => {
  try {
    const dataCallBack = await selectDeptTree();
    // 重置表格的数据
    const responBody = dataCallBack.data
    data.value = [];
    data.value = responBody.nextLayer;
  } catch (error) {
    console.error('Error fetching data:', error);

  } finally {
    // 关闭数据加载渲染
    loadingFlag.value = false;
  }
}

const listByLimitUserTable = async () => {
  try {
    const responBody = await listByLimitUser(searchUserQuery.value);
    // 重置表格的数据
    dataSource.value = [];
    dataSource.value = responBody.responseBody;
    page.total = responBody.totalNum;
    page.current = responBody.pageIndex;
    // 确保total有默认值
    if (!page.total) {
      page.total = 0;
    }
  } catch (error) {
    console.error('Error fetching data:', error);
  } finally {
    // 关闭数据加载渲染
    loadingFlag.value = false;
  }
}

// 部门选择器
const optionsDeptSelect = ref([]);


const optionsDeptSelectLoading = async (row: any) => {
  try {
    let deptId = '';
    if (row && row.id !== null && row.id !== '' && row.id !== undefined) {
      deptId = row.id;
    }
    const responBody = await queryTree(deptId);
    // 重置表格的数据
    optionsDeptSelect.value = [];
    optionsDeptSelect.value = responBody.data;
  } catch (error) {
    console.error('Error optionsDeptSelectLoading data:', error);
  }
}

const data = ref([
  {
    title: 'xxxx公司',
    id: 1,
    checked: true,
    children: [
      {
        title: '研发部',
        id: 2,
        children: [
          {
            title: '研发一部',
            id: 3
          },
          {
            title: '研发二部',
            id: 4
          },
          {
            title: '研发三部',
            id: 5
          }
        ]
      },
      {
        title: '测试部',
        id: 6,
        children: [
          {
            title: '测试一部',
            id: 7,
            disabled: true
          },
          {
            title: '测试二部',
            id: 8
          }
        ]
      },
      {
        title: '设计部',
        id: 9
      },
      {
        title: '市场部',
        id: 10
      }
    ]
  }
])
const showLine = ref(false)
const selectedKey = ref('')
const selectedNode = ref({
  id: 0,
  title: ''
})
const isFold = ref(false)

function toReset() {
  searchUserQuery.value = {
    userName: '',
    nickName: '',
    sex: '',
    deptId: null as number | null,
    pageIndex: 1,
    pageSize: 10,
  }
  // 重置请求
  page.current = 1;
  page.limit = 10;
  change(page);
}

function handleClick(node: any) {
  selectedNode.value = JSON.parse(JSON.stringify(node))
  searchUserQuery.value.deptId = selectedNode.value.id
  searchUserQuery.value.pageIndex = 1;
  searchUserQuery.value.pageSize = 10;
  page.current = 1;
  page.limit = 10;
  change(page)
}

function toAdd() {
  title22.value = '新建';
  model22.value = {
    deptId: '',
    organization: '',
    status: '1',
    parentId: 0,
    deptName: '',
    id: '',
    phone: '',
    deptCategory: '',
    type: '',
    orderNum: 0,
    remark: '',
    email: ''
  };
  visible22.value = true;
  optionsDeptSelectLoading('');
}

/**
 * 树节点选择编辑
 */
async function toEdit() {
  title22.value = '编辑';
  // 获取选中的数的节点
  const node = selectedNode.value;
  // 获取接口的详情数据
  const jsonDataResult = await queryDetail(node.id);
  // 渲染数据回显
  model22.value = jsonDataResult.data;
  model22.value.parentId = Number(jsonDataResult.data.parentId);
  // 加载回显父级选择框
  optionsDeptSelectLoading({ id: node.id });
  // 显示编辑层
  visible22.value = true;
}

function toDelete() {
  if (selectedKey.value == '') {
    layer.msg('您未选择组织机构，请先选择要删除的组织机构', {
      icon: 3,
      time: 2000
    })
    return false;
  }
  layer.confirm(
    '您将删除所选中的组织机构 [ ' + selectedNode.value.title + ' ] ？',
    {
      title: '提示',
      btn: [
        {
          text: '确定',
          callback: (id: any) => {
            // 获取选中的节点ID
            const nodeId = selectedKey.value;
            // 调用删除接口
            delsByLeader(nodeId).then(resp => {
              if (resp.success) {
                layer.msg('执行成功！', { icon: 1, time: 1000 })
                // 重新渲染结构体数据
                queryDataByServerForLimit();
              } else {
                layer.msg('执行失败' + resp.msg, { icon: 2, time: 2000 })
              }
            }).catch(() => {
              layer.msg('删除失败');
            })
            layer.close(id);
          }
        },
        {
          text: '取消',
          callback: (id: any) => {
            layer.msg('您已取消操作')
            layer.close(id)
          }
        }
      ]
    }
  )
}

function toSearch() {
  page.current = 1
  change(page)
}

const selectedKeys = ref<string[]>([]);//ref([{}])
// 修改分页配置，添加position属性设置为right，并补充其他必要属性
const page = reactive({
  current: 1,
  limit: 10,
  total: 0,
  position: 'right',
  limits: [10, 20, 30, 40, 50]
})
// 列字段
const columns = ref([
  { title: '选项', width: '55px', type: 'checkbox', fixed: 'left' },
  { title: '编号', width: '120px', key: 'id', fixed: 'left', sort: 'id' },
  { title: '用户账号', width: '80px', key: 'userName', sort: 'userName' },
  { title: '用户名', width: '80px', key: 'nickName', sort: 'nickName' },
  { title: '性别', width: '80px', key: 'sex', sort: 'sex' },
  { title: '部门', width: '120px', key: 'deptName', sort: 'deptName' },
  {
    title: '创建时间',
    width: '120px',
    key: 'createTime'
  },
  { title: '状态', width: '120px', key: 'status', customSlot: 'status' },

  {
    title: '操作',
    width: '150px',
    customSlot: 'operator',
    key: 'operator',
    fixed: 'right'
  }
])
const change = (page: any) => {
  loadingFlag.value = true
  searchUserQuery.value.pageIndex = page.current;
  searchUserQuery.value.pageSize = page.limit;
  listByLimitUserTable();
}
const sortChange = (key: any, sort: number) => {
  layer.msg(`字段${key} - 排序${sort}, 你可以利用 sort-change 实现服务端排序`)
}
const dataSource = ref([
  {
    id: '1',
    name: '管理员',
    sex: '男',
    role: '管理员',
    account: 'admin',
    joinTime: '2022-02-09 18:34:56',
    status: true
  }
])
// 激活用户或者禁用用户
const changeStatus = (isChecked: boolean, row: any) => {
  const thatJson = {
    id: row.id,
    status: isChecked
  }
  updateBySuper(thatJson).then(resp => {
    if (resp.success) {
      dataSource.value.forEach((item) => {
        if (item.id === row.id) {
          layer.msg('Success', { icon: 1 }, () => {
            item.status = isChecked
          })
        }
      })
    } else {
      layer.msg('修改失败' + resp.msg, { icon: 2, time: 2000 })
    }
  })
}
const loadDataSource = (page: number, pageSize: number) => {
  listByLimitUserTable();
}
const model11 = ref({
  nickName: '',
  phoneNumber: '',
  role: '',
  sex: '男',
  password: '',
  email: '',
  remark: '',
  deptId: '',
  id: ''
})
const layFormRef11 = ref()
const visible11 = ref(false)
const title = ref('新增')
const changeVisible11 = (text: any, row: any) => {
  title.value = text
  if (row != null) {
    let info = JSON.parse(JSON.stringify(row))
    model11.value = info
  } else {
    model11.value = {
      nickName: '',
      phoneNumber: '',
      role: '',
      sex: '男',
      password: '',
      email: '',
      remark: '',
      deptId: '',
      id: ''
    };
    // 获取选中的数的节点
    const node = selectedNode.value;
    model11.value.deptId = node.id + ''
    optionsDeptSelectLoading(node);
  }
  visible11.value = !visible11.value
}
const submit11 = function () {
  layFormRef11.value.validate((isValidate: any, model: any, errors: any) => {
    layer.open({
      type: 1,
      title: '表单提交结果',
      content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(
        model
      )} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`,
      shade: false,
      isHtmlFragment: true,
      btn: [
        {
          text: '确认',
          callback(index: any) {
            layer.close(index)
          }
        }
      ],
      area: '500px'
    })
  })
}
// 清除校验
const clearValidate11 = function () {
  layFormRef11.value.clearValidate()
}
// 重置表单
const reset11 = function () {
  layFormRef11.value.reset()
}

function toRemoveUser() {
  if (selectedKeys.value.length == 0) {
    layer.msg('您未选择数据，请先选择要删除的数据', { icon: 3, time: 2000 })
    return
  }
  const keyIndexs = selectedKeys.value;
  const dataItem = dataSource.value;
  layer.confirm('您将删除所有选中的数据？', {
    title: '提示',
    btn: [
      {
        text: '确定',
        callback: (id: any) => {
          let arrayObj: string[] = []
          dataItem.forEach(itemObj => {
            keyIndexs.forEach(itemv2 => {
              if (itemObj.id === itemv2) {
                arrayObj.push(itemObj.id)
              }
            })
          })
          // 方法一：使用 URLSearchParams（推荐，干净）
          const params = new URLSearchParams();
          arrayObj.forEach(id => params.append('idList', id));
          deleteUserByIds(params).then(resp => {
            if (resp.success) {
              layer.msg('执行成功！', { icon: 1, time: 1000 })
              // 重新渲染表格
              loadDataSource(page.current, page.limit)
            } else {
              layer.msg('保存失败' + resp.msg, { icon: 2, time: 2000 })
            }
          });
          layer.close(id)
        }
      },
      {
        text: '取消',
        callback: (id: any) => {
          layer.msg('您已取消操作')
          layer.close(id)
        }
      }
    ]
  })
}

async function toSubmitUser() {
  try {
    const thatJson = model11.value;
    // 参数校验
    if (thatJson.nickName === "" || thatJson.nickName === undefined || thatJson.nickName === null) {
      layer.msg('用户名称未填写', { icon: 2, time: 2000 })
      return false;
    }
    if (thatJson.email === "" || thatJson.email === undefined || thatJson.email === null) {
      layer.msg('邮箱未填写', { icon: 2, time: 2000 })
      return false;
    }
    if (thatJson.phoneNumber === "" || thatJson.phoneNumber === undefined || thatJson.phoneNumber === null) {
      layer.msg('手机号未填写', { icon: 2, time: 2000 })
      return false;
    }
    if (title.value === '新增') {
      if (thatJson.password === "" || thatJson.password === undefined || thatJson.password === null) {
        layer.msg('密码未填写将使用', { icon: 2, time: 2000 })
        return false;
      }
    }
    if (thatJson.sex === "男") {
      thatJson.sex = "0";
    } else if (thatJson.sex === "女") {
      thatJson.sex = "1";
    } else {
      thatJson.sex = "2";
    }
    let response;
    if (thatJson.id) {
      response = await updateBySuper(thatJson);
    } else {
      response = await saveUserBySuper(thatJson);
    }
    if (response.success) {
      layer.msg('执行成功！', { icon: 1, time: 1000 })
      // 重新渲染表格
      loadDataSource(page.current, page.limit)
    } else {
      layer.msg('保存失败' + response.msg, { icon: 2, time: 2000 })
    }
    visible11.value = false
  } catch (error) {
    console.error('Error saving data:', error);
    layer.msg('保存失败: ' + (error || '未知错误'), { icon: 2, time: 2000 });
  }
}
async function toCancelUser() {
  visible11.value = false
  visible22.value = false
}
async function toSubmit() {
  try {
    const thatJson = model22.value;
    // 参数校验
    if (thatJson.deptName === "" || thatJson.deptName === undefined || thatJson.deptName === null) {
      layer.msg('部门名称未填写', { icon: 2, time: 2000 })
      return false;
    }
    if (thatJson.email === "" || thatJson.email === undefined || thatJson.email === null) {
      layer.msg('邮箱未填写', { icon: 2, time: 2000 })
      return false;
    }
    if (thatJson.phone === "" || thatJson.phone === undefined || thatJson.phone === null) {
      layer.msg('手机号未填写', { icon: 2, time: 2000 })
      return false;
    }
    if (title.value === '新增') {
      if (thatJson.status === "" || thatJson.status === undefined || thatJson.status === null) {
        layer.msg('状态未填写将使用', { icon: 2, time: 2000 })
        return false;
      }
    }
    if (thatJson.id) {

    }
    let response = await saveByLeader(thatJson);
    if (response.success) {
      layer.msg('执行成功！', { icon: 1, time: 1000 })
      // 重新渲染表格
      loadDataSource(page.current, page.limit)
    } else {
      layer.msg('保存失败' + response.msg, { icon: 2, time: 2000 })
    }
    queryDataByServerForLimit();
    visible11.value = false
  } catch (error) {
    console.error('Error saving data:', error);
    layer.msg('保存失败: ' + (error || '未知错误'), { icon: 2, time: 2000 });
  }
  visible11.value = false
  visible22.value = false
}

function toCancel() {
  visible11.value = false
  visible22.value = false
}

function confirmUser(row: any) {
  let idList = [row.id]
  // 方法一：使用 URLSearchParams（推荐，干净）
  const params = new URLSearchParams();
  idList.forEach(id => params.append('idList', id));
  deleteUserByIds(params).then((response: any) => {
    if (response.success) {
      layer.msg('删除成功！', { icon: 1, time: 1000 })
      // 重新渲染表格
      loadDataSource(page.current, page.limit)
    } else {
      layer.msg('删除失败' + response.msg, { icon: 2, time: 2000 })
    }
  }).catch((err: any) => {
    console.log(err);
  }
  )
  layer.msg('您已成功删除')
}

function cancel() {
  layer.msg('您已取消操作')
}

const model22 = ref({
  deptId: '',
  organization: '',
  status: '1',
  parentId: 0,
  deptName: '',
  phone: '',
  deptCategory: '',
  type: '',
  orderNum: 0,
  remark: '',
  email: '',
  id: '',
})
const layFormRef22 = ref()
const visible22 = ref(false)
// 修改标题
const title22 = ref('新建')
</script>

<style scoped>
.organization-box {
  width: calc(100vw - 240px);
  height: calc(100vh - 110px);
  margin-top: 10px;
  box-sizing: border-box;
  background-color: #fff;
  overflow: hidden;
}

.left-tree {
  display: inline-block;
  padding: 20px 15px 0 5px;
  height: 1200px;
  border-right: 1px solid #e6e6e6;
  box-sizing: border-box;
  position: relative;
}

/* todo layui-tree-entry 设置无效 */
.layui-tree-entry {
  position: relative;
  padding: 10px 0;
  height: 20px;
  line-height: 20px;
  white-space: nowrap;
}

.isFold {
  position: absolute;
  top: 36%;
  right: -10px;
  width: 26px;
  height: 26px;
  line-height: 26px;
  border-radius: 13px;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  cursor: pointer;
}

.search-input {
  display: inline-block;
  width: 98%;
  margin-right: 10px;
}

.isChecked {
  display: inline-block;
  background-color: #e8f1ff;
  color: red;
}
</style>